<template>
  <a-popover :mouseEnterDelay="openDelay">
    <template #content>
      <slot>
        <a-typography v-if="popoverContent">{{ popoverContent }}</a-typography>
        <a-empty v-else/>
      </slot>
    </template>
    <question-circle-two-tone :twoToneColor="color" v-if="colorable" class="tip-icon"/>
    <question-circle-outlined v-else class="tip-icon"/>
  </a-popover>
</template>

<script>
import {QuestionCircleOutlined,QuestionCircleTwoTone} from '@ant-design/icons-vue';
// 带气泡提示框的?图标
export default {
  props: {
    colorable: {
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: "#faad14"
    },
    popoverContent: {
      type: String,
      default: undefined
    },
    openDelay: {
      type: Number,
      default: 0.1
    }
  },
  components: {
    QuestionCircleOutlined,
    QuestionCircleTwoTone
  },
  name: "PopoverQuestionCircle"
}
</script>

<style scoped>
.tip-icon {
  color: rgba(0, 0, 0, 0.25);
  font-size: 12px;
}
</style>
